<!--
* @description 高德搜索服务API POI
* @fileName pos_api.vue
* @author huangyu
* @date 2022/03/10 11:06:46
!-->
<template>
    <div>
        <van-nav-bar title="高德搜索服务" />
        <div>
            <van-cell-group style="margin-top:10px;">
                <van-field v-model="city" label="城市名" placeholder="请输入城市名" />
            </van-cell-group>
            <van-cell-group style="margin-top:10px;">
                <van-field v-model="keywords" label="查询关键词" placeholder="如小学" />
            </van-cell-group>
            <!-- <van-cell-group inset>
                <van-field v-model="types" label="查询类型" placeholder="请输入查询类型" />
            </van-cell-group> -->
            <van-button style="margin-top:10px;" type="primary" @click="getPoiData()" block>查询</van-button>
        </div>
        <van-cell v-for="(item,index) in list" :key="index" :title="index+1+'、'+item.name+item.tel" />
    </div>
</template>

<script>
import {get} from '@/common/app.js'
export default {
    components: {
    },
    data() {
        return {
            key: '',
            // 查询关键字
            keywords: '椒江区',
            // 查询城市
            city: '小学',

            list: [],
            loading: false,
            finished: false,
            page: 1,//页数
            limit: 50//条数
        }
    },
    mounted() {
        // this.getPoiData()
    },
    methods: {
        getPoiData(){
            if(!this.keywords){
                this.$notify({ type: 'warning', message: '查询关键字不能为空' });
                return
            }
            let params = {
                type: 'getGaoDeApi',
                api: 'api_poi',
                keywords: this.keywords,
                city: this.city,
                page: this.page,
                limit: this.limit,
            }
            get('appFunctions',params).then(res=>{
                if(res.infocode=='10000'){
                    this.list = res.pois
                }
            })
        },
        onLoad() {
            this.page += 1;//页数+1
            // this.getPoiData();
        },
    },
}
</script>

<style scoped>

</style>